<template>
  <div class="viewAll" style="width:100%;;background-color:#F8F4F4">
    <div class="top" style="width:100%;">
      <el-row :gutter="8">
      <el-col :span="2">
        <div style="background-color:#FFFFFF;width:100%;height:100px;display: flex;flex-direction: column;justify-content: center;align-items: center">
          <img src="../../../public/images/tuichu.png" style="width:30px;height:30px;background-size:100% 100%">
          <div style="color:#C15248;font-size:16px;margin-top:5px">登出</div>
        </div>
      </el-col>
      <el-col :span="22">
        <el-row :gutter="8">
          <el-col :span="8">
            <div class="grid-content bg-purple" style="background-color:#FFFFFF;height:100px;padding-left:8pt;">
            <div style="display:flex;align-items: center;height:50px">
              <img src="../../../public/images/mendian.png" style="width:35px;height:35px;background-size:100% 100%">
              <p>门店: dev总部测试合川路店</p>
            </div>
            <div style="display:flex;align-items: center;height:50px">
              <img src="../../../public/images/mendian.png" style="width:35px;height:35px;background-size:100% 100%">
              <p>操作人：0000001</p>
            </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="height:100px;background-color:#FFFFFF;box-sizing:border-box !important">
              <div style="height:50px;display:flex;align-items: center;justify-content: space-between;margin-left:8px">
              <p>2021/08/12 星期四 06:59</p>
              <img src="../../../public/images/mendian.png" style="width:20px;height:20px;background-size:100% 100%;margin: -15px 15px 0 0">
            </div>
            <div style="height:50px;display:flex;align-items: center;box-sizing:border-box">
              <p style="height:26px;line-height:26px;;background-color:#F0E2E2;color:#D4B6B3;border-radius:4pt;padding:3px 5px 3px 5px;margin-left:8px;box-sizing:border-box">机号:01</p>
              <p style="height:26px;line-height:26px;background-color:#F0E2E2;color:#D4B6B3;border-radius:4pt;padding:3px 5px 3px 5px;margin-left:8px;box-sizing:border-box">机号:01</p>
            </div>
            </div>
            </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="background-color:#FFFFFF;height:100px;display:flex;justify-content: space-around;align-items: center">
              <div>
                <img src="../../../public/images/mendian.png" style="width:40px;height:40px;background-size:100% 100%">
                <p style="margin-top:0px;color:#C25348">会员</p>
              </div>
              <div>
                <img src="../../../public/images/mendian.png" style="width:40px;height:40px;background-size:100% 100%">
                <p style="margin-top:0px;color:#C25348">礼券</p>
              </div>
              <div>
                <img src="../../../public/images/mendian.png" style="width:40px;height:40px;background-size:100% 100%">
                <p style="margin-top:0px;color:#C25348">订单</p>
              </div>
              <div>
                <img src="../../../public/images/mendian.png" style="width:40px;height:40px;background-size:100% 100%">
                <p style="margin-top:0px;color:#C25348">系统</p>
              </div>
              <div>
                <img src="../../../public/images/mendian.png" style="width:40px;height:40px;background-size:100% 100%">
                <p style="margin-top:0px;color:#C25348">扫券码</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    </div>
    <div style="width:100%;height:calc(100vh - 100px);display:flex">
      <div  style="width:38%;height:100%;">
        <div class="tabLeft" style="width:98%;height:74%;background-color:#fff;margin:15px 0 15px 15px;border-radius:10pt">
          <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="食堂" name="first1">
              <div style="display:flex;align-items: center;width:100%;height:100%;background-color:#F5F5F5">
                <p style="width:30%;text-align:center">品名</p>
                <p style="width:30%;text-align:center">数量</p>
                <p style="width:30%;text-align:center">价格</p>
                <p style="width:8%;height:28px;line-height:30px;text-align:center;border-radius:3pt;background-color:#E61414;color:#fff;font-size:14px">清空</p>
              </div>
              <div style="height:300px;overflow:auto">
                <div>
                  <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                    <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                    <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                    <div style="width:30%;text-align:center">¥235.00</div>
                    <div style="width:8%;text-align:center">
                      <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                    </div>
                  </div>
                  <div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">可乐</p>
                      <p style="width:30%;text-align:center;color:#999999">2</p>
                    </div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">薯条</p>
                      <p style="width:30%;text-align:center;color:#999999">1</p>
                    </div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">鹅肝寿司</p>
                      <p style="width:30%;text-align:center;color:#999999">1</p>
                    </div>
                  </div>
                </div>
                <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                  <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                  <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                  <div style="width:30%;text-align:center">¥235.00</div>
                  <div style="width:8%;text-align:center">
                    <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                  </div>
                </div>
                <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                  <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                  <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                  <div style="width:30%;text-align:center">¥235.00</div>
                  <div style="width:8%;text-align:center">
                    <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                  </div>
                </div>
              </div>
              <div style="display:flex;align-items: center;width:100%;margin-top:5px;padding:10px">
                  <div style="width:30%;text-align:center">商品：3件</div>
                  <div style="width:30%;text-align:center">总金额: ¥705.00</div>
                  <div style="width:30%;text-align:center">优惠:¥73.00</div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="外带" name="second1">
                <div style="display:flex;align-items: center;width:100%;height:100%;background-color:#F5F5F5">
                <p style="width:30%;text-align:center">品名</p>
                <p style="width:30%;text-align:center">数量</p>
                <p style="width:30%;text-align:center">价格</p>
                <p style="width:8%;height:28px;line-height:30px;text-align:center;border-radius:3pt;background-color:#E61414;color:#fff;font-size:14px">清空</p>
              </div>
               <div style="height:300px;overflow:auto">
                <div>
                  <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                    <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                    <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                    <div style="width:30%;text-align:center">¥235.00</div>
                    <div style="width:8%;text-align:center">
                      <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                    </div>
                  </div>
                  <div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">可乐</p>
                      <p style="width:30%;text-align:center;color:#999999">2</p>
                    </div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">薯条</p>
                      <p style="width:30%;text-align:center;color:#999999">1</p>
                    </div>
                    <div style="display:flex">
                      <p style="width:30%;text-align:center;color:#999999">鹅肝寿司</p>
                      <p style="width:30%;text-align:center;color:#999999">1</p>
                    </div>
                  </div>
                </div>
                <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                  <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                  <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                  <div style="width:30%;text-align:center">¥235.00</div>
                  <div style="width:8%;text-align:center">
                    <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                  </div>
                </div>
                <div style="display:flex;align-items: center;width:100%;padding:5px 10px 5px 10px">
                  <div style="width:30%;text-align:center">牛果果虾贝贝套餐</div>
                  <div style="width:30%;text-align:center"><el-input-number  v-model="num" style="width:100%"></el-input-number></div>
                  <div style="width:30%;text-align:center">¥235.00</div>
                  <div style="width:8%;text-align:center">
                    <img src="../../../public/images/mendian.png" style="width:25px;height:25px;background-size:100% 100%">
                  </div>
                </div>
              </div>
              <div style="width:100%;height:25%;display:flex;align-items: center;width:100%;margin-top:5px;padding:10px">
                  <div style="width:30%;text-align:center">商品：3件</div>
                  <div style="width:30%;text-align:center">总金额: ¥705.00</div>
                  <div style="width:30%;text-align:center">优惠:¥73.00</div>
                </div>
            </el-tab-pane>

          </el-tabs>
        </div>
        <div style="margin:15px 0 15px 15px;display:flex;justify-content: space-between">
          <div style="width:26%;height:40px;border-radius:8pt;background-color:#fff;text-align:center;line-height:40px">挂单</div>
          <div style="width:26%;height:40px;border-radius:8pt;background-color:#fff;color:#C25348;text-align:center;line-height:40px">交易取消</div>
          <div style="width:26%;height:40px;border-radius:8pt;background-color:#C25348;text-align:center;line-height:40px">确定</div>
        </div>
      </div>
      <div style="width:60%;height:82%;background-color:#fff;margin:15px;border-radius:10pt">
        <el-tabs class="tabRight" style="width:100%;height:100%" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="套餐" name="first">
              <el-tabs type="card" class="package" style="width:100%;height:100%;" v-model="activeNamePackage" @tab-click="handleClick">
                  <el-tab-pane label="可选套餐" name="firstPackage">
                    <div style="width:100%;height:500px;overflow:auto">
                        <el-row>
                          <el-col :span="5" v-for="(o, index) in 8" :key="index" :offset="1">
                            <el-card style="margin-bottom: 5px" :body-style="{ padding: '0px' }">
                              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                              <div style="padding-left: 14px;">
                                <p style="height:5px">好吃的汉堡</p>
                                <p style="color:#C25348;font-size:18px;margin-top:20px;height:5px">¥235.00</p>
                              </div>
                            </el-card>
                          </el-col>
                        </el-row>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="固定套餐" name="secondPackage">固定套餐</el-tab-pane>
              </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="饮料" name="second">饮料</el-tab-pane>
          <el-tab-pane label="主食" name="third">主食</el-tab-pane>
          <el-tab-pane label="面包甜食" name="fourth">定时任务补偿</el-tab-pane>
          <el-tab-pane label="商品" name="fiveth">定时任务补偿</el-tab-pane>
          <el-tab-pane label="临时活动" name="sixth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </div>

  </div>


</template>
<script>
export default {
    name:'order',
    data(){
      return{
        fullHeight: 0,
        activeName1: 'first1',
        activeName: 'first',
        activeNamePackage:'firstPackage',
        num: 0,
        currentDate: new Date()
      }
    },
    created(){
      let height = document.body.offsetHeight // 网页可视区域高度
      this.fullHeight = height + 'px'
      console.log(this.fullHeight)
    },

    methods:{
       handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>

<style>
  .app-main .viewAll {
    height: 100%;
  }
  .top{
    height:100px;
  }
  .tabLeft .el-tabs__nav{
    width: 100% ;
  }
  .tabLeft .el-tabs__nav .el-tabs__item{
    width: 50% ;
    text-align: center !important;
  }
  .tabLeft .el-tabs__item.is-active{
    background-color: #C25348;
    color: #fff;
    border-radius:10pt 10pt 0 0
  }
  .package .el-tabs__nav{
    width: 100% ;
  }
  .package .el-tabs__nav .el-tabs__item{
    width: 50% ;
    border: 1px solid #C25348;
    color: #000;
    text-align: center !important;
    margin-left: 35px;
    border-radius:12.5px
  }
  .package .el-tabs__item.is-active{
    background-color: #C25348;
    color: #fff;
    border: 1px solid #C25348;
    border-radius:12.5px
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
    border-left: 1px solid #C25348
  }
  .package.el-tabs--card>.el-tabs__header{
    border-bottom: none
  }
  .package.el-tabs--card>.el-tabs__header .el-tabs__nav{
    border: none
  }
  .tabRight .el-tabs__nav{
    width: 100% ;
  }
  .tabRight .el-tabs__nav .el-tabs__item{
    width: calc(100% / 6) ;
    text-align: center !important;
  }
  .el-tabs__item.is-active{
    color: #C25348
  }
  .el-tabs__active-bar{
    background-color: #C25348
  }
  .el-tabs__item:hover {
    color: #C25348;
    cursor: pointer;
}

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 145px;
    display: block;
  }
</style>
